import React, {Component} from 'react'
import {Button, Divider, Icon} from 'antd'
import '../../less/index.less'
import {withRouter} from 'react-router-dom'
import {TwsReactMarkdownEditor, TwsReactMarkdownPreview} from 'tws-antd'
import {connect} from 'react-redux'
import {getUploadUrl} from '../../constant/upload-url'
import {FormattedMessage} from 'react-intl'
import * as assignmentQuizMarkAction from '../../actions/assignment-quiz-Mark'
import moment from 'moment'

class AssignmentEvaluateBox extends Component {
  constructor (props) {
    super(props)
    const {id, evaluate, ranking} = props.assignmentQuizMark
    this.state = {
      isShowMarkdownEditor: false,
      assignmentQuizMarkId: id || -1,
      evaluate: evaluate || '',
      ranking: ranking || 'NoScore'
    }
  }
  componentWillReceiveProps (props) {
    const {id, evaluate, ranking} = props.assignmentQuizMark
    this.setState({
      isShowMarkdownEditor: false,
      assignmentQuizMarkId: id || -1,
      evaluate: evaluate || '',
      ranking: ranking || 'NoScore'
    })
  }
  handleClick () {
    const {assignmentQuizMark} = this.props
    this.setState({
      isShowMarkdownEditor: !this.state.isShowMarkdownEditor,
      evaluate: assignmentQuizMark.evaluate ? assignmentQuizMark.evaluate : ''
    })
  }

  handleSubmit () {
    const {assignmentId, quizId, studentId} = this.props
    const {evaluate, assignmentQuizMarkId, ranking} = this.state
    if (assignmentQuizMarkId === -1) {
      this.props.addAssignmentQuizMark(assignmentId, quizId, studentId, ranking, evaluate)
    } else {
      this.props.editAssignmentQuizMark(assignmentQuizMarkId, assignmentId, quizId, studentId, ranking, evaluate)
    }
    this.setState({
      isShowMarkdownEditor: false
    })
  }

  render () {
    const {assignmentQuizMark, settings} = this.props
    const {evaluate, isShowMarkdownEditor} = this.state
    return (<div className='margin-t-3'>
      {isShowMarkdownEditor
        ? <div className='margin-t-2 mark-down-wrap'>
          <div className='margin-b-1'>
            <TwsReactMarkdownEditor
              value={assignmentQuizMark.evaluate}
              action={getUploadUrl(settings.appContextPath)}
              onChange={evaluate => this.setState({evaluate})} />
            <Button
              className='margin-t-2'
              type='primary'
              onClick={this.handleSubmit.bind(this, assignmentQuizMark.id)}>
              <FormattedMessage id='确定' />
            </Button>
            <Button
              className='margin-t-2 margin-l-2'
              onClick={this.handleClick.bind(this)}>
              <FormattedMessage id='取消' />
            </Button>
          </div>
        </div>
          : evaluate
              ? <div className='margin-b-2 mark-down-wrap'>
                <TwsReactMarkdownPreview source={assignmentQuizMark.evaluate} />
                <div className='comment-title-icon'>
                  {moment(assignmentQuizMark.createTime).format('YYYY-MM-DD')}
                  <Divider className='margin-l-1 margin-r-1' type='vertical' />
                  <Icon className='margin-r-1' type='edit'
                    onClick={this.handleClick.bind(this)} />
                </div><br />
              </div>
              : <div>
                <FormattedMessage id='暂无评价' />
                <div className={this.state.isShowMarkdownEditor ? 'hidden' : ''}>
                  <Button onClick={this.handleClick.bind(this)}>
                    <FormattedMessage id='评价' />
                  </Button>
                </div>
              </div>
      }
    </div>
    )
  }
}
const mapStateToProps = ({settings, assignmentQuizMark}) => ({
  settings, assignmentQuizMark
})
const mapDispatchToProps = dispatch => ({
  editAssignmentQuizMark: (id, assignmentId, quizId, studentId, ranking, evaluate) => dispatch(
        assignmentQuizMarkAction.editAssignmentQuizMark(id, assignmentId, quizId, studentId, ranking, evaluate)),
  addAssignmentQuizMark: (assignmentId, quizId, studentId, ranking, evaluate) => dispatch(
        assignmentQuizMarkAction.addAssignmentQuizMark(assignmentId, quizId, studentId, ranking, evaluate))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentEvaluateBox))
